<template>
    <div class="bg-light" :style="{ height: newHeight }">
        <div>
            <div class="header_box">
                <div>
                    <van-icon class="icon" name="arrow-left" @click="back" />
                </div>
                <div name="center">商品详情</div>
                <div name="right"></div>
            </div>
        </div>
        <div class="p-1 bg-white">
            <div>
                <van-form @submit="onSubmit">
                    <div class="py-1">
                        <van-cell-group class="font-mi">
                            <van-row class="a-center d-flex">
                                <van-col span="8"> <div>中文名称</div></van-col>
                                <van-col span="16"
                                    ><van-field
                                        rows="2"
                                        autosize
                                        v-model="dataList[0]"
                                        placeholder="请输入用户名"
                                        class="bg-light-secondary rounded"
                                /></van-col>
                            </van-row>
                        </van-cell-group>
                    </div>
                    <div class="py-1">
                        <van-cell-group class="font-mi">
                            <van-row class="a-center d-flex">
                                <van-col span="8"> <div>英文名称</div></van-col>
                                <van-col span="16"
                                    ><van-field
                                        rows="2"
                                        autosize
                                        v-model="dataList[1]"
                                        placeholder="请输入用户名"
                                        class="bg-light-secondary rounded"
                                /></van-col>
                            </van-row>
                        </van-cell-group>
                    </div>
                    <div class="py-1">
                        <van-cell-group class="font-mi">
                            <van-row class="a-center d-flex">
                                <van-col span="8"> <div>分类描述</div></van-col>
                                <van-col span="16"
                                    ><van-field
                                        rows="2"
                                        autosize
                                        v-model="dataList[2]"
                                        placeholder="请输入用户名"
                                        class="bg-light-secondary rounded"
                                /></van-col>
                            </van-row>
                        </van-cell-group>
                    </div>
                    <div class="py-1">
                        <van-cell-group class="font-mi">
                            <van-row class="a-center d-flex">
                                <van-col span="8"> <div>是否可用</div></van-col>
                                <van-col span="16"
                                    ><van-field
                                        rows="2"
                                        autosize
                                        v-model="dataList[3]"
                                        placeholder="请输入用户名"
                                        class="bg-light-secondary rounded"
                                /></van-col>
                            </van-row>
                        </van-cell-group>
                    </div>
                    <div style="margin: 16px" class="text-center">
                        <van-button round block type="warning" native-type="submit">提交</van-button>
                        <div @click="del" class="font-sm text-danger pt-2">删除</div>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>

<script>
import { updateGoodsClass } from '../../https/Commit.js'
import { mapState } from 'vuex'

import { Toast } from 'vant'
export default {
    data() {
        return {
            dataList: [],
            newHeight: '',
            delList: [],
            zhengque: ''
        }
    },
    methods: {
        ...mapState(['CommAdd/addGoodsClass']),

        back() {
            this.$router.go(-1)
        },
        onSubmit() {
            console.log('submit', this.dataList)
            if (this.dataList.length < 4) {
                Toast.fail('请检查一下哦')
            } else {
                if (this.dataList[3] == '是') {
                    console.log(typeof this.dataList)
                    this.dataList.splice(3, 1)
                    this.dataList.push(1)
                    console.log(this.dataList)
                    updateGoodsClass(this.dataList)
                        .then((res) => {
                            console.log('成功', res)
                            Toast.success('修改成功')
                            this.$router.push('/CommodityMan/CommClassification')
                        })
                        .catch((err) => {
                            console.log(err)
                        })
                } else {
                    console.log(typeof this.dataList)
                    this.dataList.splice(3, 1)
                    this.dataList.push(2)
                    console.log(this.dataList)
                    updateGoodsClass(this.dataList)
                        .then((res) => {
                            console.log(res)
                            Toast.success('修改成功')
                            this.$router.push('/CommodityMan/CommClassification')
                        })
                        .catch((err) => {
                            console.log(err)
                        })
                }
            }
        },
        del() {
            this.dataList = this.delList
            Toast.success('删除成功')
            this.$router.push('/CommodityMan/CommClassification')
        }
    },
    created() {
        console.log(this.$store.state.CommAdd.addGoodsClass)
        this.dataList = this.$store.state.CommAdd.addGoodsClass[0]
    }
}
</script>

<style lang="scss" scoped></style>
